<template>
  <div>
    <el-row
      v-for="item1 in row.children"
      :key="item1.id"
    >
      <!--一级数据-->
      <el-col :span="4" class="authorityHeader">
        <el-tag closable effect="dark" type="primary" @close="delRight(row.id,item1.id)">{{ item1.authName }}</el-tag>
        <i class="el-icon-caret-right" />
      </el-col>
      <el-col :span="20">
        <el-row v-for="item2 in item1.children" :key="item2.id">
          <!--二级数据-->
          <el-col :span="6" class="authorityHeader">
            <el-tag closable effect="dark" type="success" @close="delRight(row.id,item2.id)">{{ item2.authName }}</el-tag>
            <i class="el-icon-caret-right" />
          </el-col>
          <!--  三级数据-->
          <el-col :span="18">
            <el-tag v-for="item3 in item2.children" :key="item3.id" closable effect="dark" type="warning" @close="delRight(row.id,item3.id)">{{ item3.authName }}</el-tag>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { delRoleAuthority } from '@/api/roles'
import { deleteItem } from '@/utils'

export default {
  name: 'DownContent',
  props: {
    row: {
      type: Object,
      required: true
    }
  },
  methods: {
    async delRight(roleId, rightId) {
      await delRoleAuthority(roleId, rightId)
      this.$message.success('删除成功')
      deleteItem(this.row, rightId)
    }
  }
}
</script>

<style scoped>
.el-tag{
  margin: 5px;
}
.el-row{
  align-items: center;
  display: flex;
  border: 1px solid #efefef;
  collapse: collapse;
}
.authorityHeader{
  text-align: center;

  collapse: collapse;
}
.el-table__expanded-cell{
  collapse: collapse;
}
</style>

